<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Maximum Width Edge Case Test</title>

    <script src="../../dist/vis-network.min.js" type="text/javascript"></script>
    <link
      href="../../dist/vis-network.min.css"
      rel="stylesheet"
      type="text/css"
    />

    <style type="text/css">
      #mynetwork {
        width: 600px;
        height: 400px;
        border: 1px solid lightgray;
      }
    </style>
  </head>

  <body>
    <p>
      A word in a label that's wider than the maximum width will be forced onto
      a line. We can't do better without breaking the word into pieces, and even
      then the pieces could still be too wide.
    </p>

    <p>Avoid the problem. Don't set ridiculously small maximum widths.</p>

    <div id="mynetwork"></div>

    <script type="text/javascript">
      var nodes = new vis.DataSet([
        { id: 1, label: "Node 1", widthConstraint: { maximum: 30 } },
      ]);

      var edges = [];

      var container = document.getElementById("mynetwork");
      var data = {
        nodes: nodes,
        edges: edges,
      };
      var options = {
        edges: {
          font: {
            size: 12,
          },
          widthConstraint: {
            maximum: 90,
          },
        },
        nodes: {
          shape: "box",
          margin: 10,
          font: {
            multi: true,
          },
          widthConstraint: {
            maximum: 200,
          },
        },
        physics: {
          enabled: false,
        },
      };
      var network = new vis.Network(container, data, options);
    </script>
  </body>
</html>
